
import { type ICapability } from "@/components/capability";
import { Button, Dropdown, Space, type MenuProps } from "@/components/base";
import I001 from "./icons/I001.svg?react";
import Icon from '@ant-design/icons';
import styles from './index.module.less';
import React from "react";
import { v4 as uuid } from "uuid";

interface IItem {
    expand: ICapability,
    sub?: IItem[]
}

export function TableOperate(props: {

    /** 操作能力列表 */
    expandOutList: ICapability[],

    /** 操作数据 */
    data?: any,

    /** 元素索引 */
    index?: number,

    /** 一级展示按钮数量 */
    expandOutCount?: number,
}) {
    const { data, index = 0, expandOutCount = 2 } = props;
    const eol = React.useMemo(() => convertToItems(props.expandOutList, data, index), [data, index, props.expandOutList])
    return (
        <Space>
            {eol?.slice(0, expandOutCount)?.map((e, i) => {
                if (e.sub) {
                    return (
                        <Dropdown menu={{ items: convertToMenuItems(e.sub, data, index) }} key={i}>
                            <Button type='link' style={{ padding: 0 }} key={i}>{e.expand.title}</Button>
                        </Dropdown>
                    )
                } else {
                    return (
                        <Button
                            key={i}
                            type='link'
                            style={{ padding: 0 }}
                            disabled={e.expand.isDisabled?.(data, index) ?? false}
                            onClick={() => {
                                e.expand.start?.(data, index);
                            }
                            }
                        >
                            {e.expand.title}
                        </Button>
                    )
                }
            })}
            {
                ((eol?.length ?? 0) > 2) &&
                <Dropdown menu={{ items: convertToMenuItems(eol.slice(2), data, index) }}>
                    <Button className={styles.dropdown} type='text' icon={<Icon component={I001} />} />
                </Dropdown>
            }
        </Space >
    )
}

/** 把 ICapability[] 转换为 IItem */
function convertToItems(capabilities?: ICapability[], data?: any, index?: number,): IItem[] | undefined {
    if (!capabilities || capabilities.length === 0) return undefined;

    const expand = capabilities
        .filter(e => e.isEnable?.(data, index) ?? true)
        .map(e => ({ expand: e, sub: convertToItems(e.sub?.(data, index), data, index) }) as IItem)
        .filter(e => (!!e.sub && e.sub.length > 0) || !!e.expand.start);

    if (expand.length === 0) return undefined;
    return expand;
}

/** sub?: IItem[] 转换为 MenuProps['items'] */
function convertToMenuItems(items?: IItem[], data?, index?): MenuProps['items'] | undefined {
    if (!items || items.length === 0) return undefined;

    return items.map(item => {
        const menuItem: MenuProps['items'][number] = {
            key: uuid(),
            label: item.expand.title,
            disabled: item.expand.isDisabled?.(data, index) ?? false,
            onClick: () => { item.expand.start?.(data, index) },
            children: []
        };

        if (item.sub) {
            menuItem.children = convertToMenuItems(item.sub);
        } else {
            menuItem.children = undefined;
        }

        return menuItem;
    });
}
